<template>
 <div id="building">
    <div class="container">
    <el-container class="home_container">
      <el-header>
        <div class="header">
          <h2>AI算法实验室</h2>
        </div>
        <el-button type="primary" plain @click="loginout">退出登录</el-button>
      </el-header>
      <el-container>
        <div
          class="toggle-button"
          :width="isCollapse ? '64px' : '150px'"
          @click="tooggleCollapse"
        >
          |||
        </div>
        <el-aside :width="isCollapse ? '64px' : '145px'">
          <el-menu
            :collapse-transition="false"
            :collapse="isCollapse"
             background-color="#a19f9f"
            text-color="#fff"
            active-text-color="#010101"
            :router="true"
          >

            <el-menu-item index="/introduce">
              <i class="el-icon-office-building"></i>
              <span slot="title">实验室介绍</span>
            </el-menu-item>
            <el-menu-item index="/selfinfomation">
              <i class="el-icon-s-custom"></i>
              <span slot="title">个人信息 &nbsp; &nbsp;&nbsp;</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
 </div>
</template>

<script>
export default {
  created() {
    this.userlist();
  },
  data() {
    return {
      isCollapse: true,
    };
  },
  methods: {
    tooggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    loginout() {
      localStorage.clear();
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped>
h2 {
  color: white;
  text-shadow: 3px 2px 3px #a19f9f;
  letter-spacing: 3px;
}
.el-main{
  position: relative;
  top: 60px;
}
.container {
  height: 100%;
  overflow: scroll;
}

.home-container {
  height: 100%;
}

.el-header {
  background: rgba(58, 60, 67, 1);
  display: flex;
  position: absolute;
  top: 0px;
  width: 100%;
  overflow: hidden;
  justify-content: space-between;
  align-items: center;
  z-index:1;
}
.header {
  display: flex;
  align-items: center;
}

.header img {
  width: 180px;
}

.el-aside {
  align-items: center;
  height: 100%;
  background: rgba(58, 60, 67, 0.9);
}

.el-menu {
  position: absolute;
  top: 90px;
}
.el-aside .el-menu {
  border-right: none;
}

.el-main {
    background: rgba(212, 212, 212, 0.6);
}
.el-card {
  background: rgba(255, 255, 255, 0);
}
.el-container.is-vertical {
  height: 100%;
  flex-direction: column;
}
.toggle-button {

  padding-left: 25px;
    background: rgba(58, 60, 67, 0.9);
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
  position: absolute;
  top: 65px;
}
#building{
  background:url("../assets/zl.jpg");
  width:100%;
  height:100%;
  position:fixed;
  background-size:100% 100%;
}
.el-icon-s-custom,.el-icon-office-building{
  color: #fff;
}
</style>
